<template>
  <div class="tag-management-container">
    <!-- 搜索栏 -->
    <el-row class="search-row">
      <el-col :span="8">
        <el-input
          v-model="searchName"
          placeholder="请输入标签名"
          style="width: 100%;"
        ></el-input>
      </el-col>
      <el-col :span="8">
        <el-button
          type="danger"
          size="large"
          @click="loadTagList()"
          style="margin-right: 10px;"
        >
          <i class="el-icon-search"></i> 搜索
        </el-button>
        <el-button
          type="primary"
          size="large"
          @click="showAddDialog"
        >
          <i class="el-icon-circle-plus"></i> 添加标签
        </el-button>
      </el-col>
    </el-row>

    <!-- 添加标签对话框 -->
    <el-dialog
      v-model="addDialogVisible"
      title="添加标签"
      width="350px"
    >
      <el-form :model="addForm" label-width="80px">
        <el-form-item label="标签名">
          <el-input v-model="addForm.tagName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addTag">确定</el-button>
      </template>
    </el-dialog>

    <!-- 编辑标签对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑标签"
      width="350px"
    >
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="标签编号">
          <el-input v-model="editForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="标签名">
          <el-input v-model="editForm.tagName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateTag">确定</el-button>
      </template>
    </el-dialog>

    <!-- 标签列表 -->
    <el-table
      :data="tagList"
      stripe
      highlight-current-row
      border
      style="width: 100%; margin-top: 20px;"
    >
      <el-table-column
        prop="id"
        label="标签编号"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="tagName"
        label="标签名"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="description"
        label="描述"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        label="状态"
        width="100"
        align="center"
      >
        <template #default="scope">
          <el-tag
            :type="scope.row.status === 1 ? 'success' : 'danger'"
            size="medium"
          >
            {{ scope.row.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="200"
        align="center"
      >
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="showEditDialog(scope.row)"
            style="margin-right: 5px;"
          >
            <i class="el-icon-edit"></i> 编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="deleteRow(scope.row)"
          >
            <i class="el-icon-delete"></i> 删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pagination.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      style="margin-top: 20px;"
    ></el-pagination>
  </div>
</template>

<script>
import axios from 'axios'
import { useUserInfoStore } from "../pinia/userinfo"

export default {
  data() {
    return {
      tagList: [],
      searchName: '',
      sprheaders: {
        uname: "",
        token: ""
      },
      addDialogVisible: false,
      editDialogVisible: false,
      addForm: {
        tagName: ''
      },
      editForm: {
        id: '',
        tagName: ''
      },
      pagination: {
        page: 1,
        limit: 10,
        total: 0
      }
    }
  },
  created() {
    const userStore = useUserInfoStore();
    this.sprheaders.uname = userStore.getUsername
    this.sprheaders.token = userStore.getToken
    this.loadTagList()
  },
  methods: {
    // 加载标签列表
    loadTagList() {
      const params = {
        tagName: this.searchName,
        page: this.pagination.page,
        limit: this.pagination.limit
      };

      axios.get(this.$baseUrl.SPRURL + "v2/tag/gettaglist", {
        headers: this.sprheaders,
        params: params
      })
      .then(res => {
        if (res.data.code === 0) {
          this.tagList = res.data.data.map(item => ({
            id: item.id,
            tagName: item.name,
            description: item.description,
            status: item.status
          }));
          this.pagination.total = res.data.count || 0;
        } else {
          this.$message.error(res.data.msg || '数据加载失败');
        }
      })
      .catch(error => {
        this.$message.error('网络请求失败，请重试');
      });
    },

    // 分页大小变化
    handleSizeChange(val) {
      this.pagination.limit = val;
      this.pagination.page = 1;
      this.loadTagList();
    },

    // 分页页码变化
    handleCurrentChange(val) {
      this.pagination.page = val;
      this.loadTagList();
    },

    // 显示添加对话框
    showAddDialog() {
      this.addDialogVisible = true;
      this.addForm = { tagName: '' };
    },

    // 显示编辑对话框
    showEditDialog(row) {
      this.editDialogVisible = true;
      this.editForm = {
        id: row.id,
        tagName: row.tagName
      };
    },

    // 添加标签
    addTag() {
      axios.post(this.$baseUrl.SPRURL + "v2/tag/tag", this.addForm, {
        headers: this.sprheaders
      })
      .then(res => {
        if (res.data.code === 0) {
          this.$message.success('标签添加成功');
          this.addDialogVisible = false;
          this.loadTagList();
        } else {
          this.$message.error(res.data.msg || '标签添加失败');
        }
      })
      .catch(error => {
        this.$message.error('网络请求失败，请重试');
      });
    },

    // 更新标签
    updateTag() {
      axios.put(this.$baseUrl.SPRURL + "v2/tag/tag", this.editForm, {
        headers: this.sprheaders
      })
      .then(res => {
        if (res.data.code === 0) {
          this.$message.success('标签更新成功');
          this.editDialogVisible = false;
          this.loadTagList();
        } else {
          this.$message.error(res.data.msg || '标签更新失败');
        }
      })
      .catch(error => {
        this.$message.error('网络请求失败，请重试');
      });
    },

    // 删除标签
    deleteRow(row) {
      this.$confirm('确认删除该标签吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        axios.delete(this.$baseUrl.SPRURL + `v2/tag/tag/${row.id}`, {
          headers: this.sprheaders
        })
        .then(res => {
          if (res.data.code === 0) {
            this.$message.success('标签删除成功');
            this.loadTagList();
          } else {
            this.$message.error(res.data.msg || '标签删除失败');
          }
        })
        .catch(error => {
          this.$message.error('网络请求失败，请重试');
        });
      })
      .catch(() => {
        this.$message.info('已取消删除');
      });
    }
  }
}
</script>

<style scoped>
.tag-management-container {
  padding: 20px;
  background-color: #f8f9fa;
}

.search-row {
  margin-bottom: 20px;
}

.el-table {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.el-pagination {
  margin-top: 30px;
  text-align: right;
}
</style>